<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改信息</title>
    <%--静态包含头部信息--%>
    <%@include file="/pages/common/header.jsp" %>
    <link rel="shortcut icon" href="../../static/img/logo_chzu1.png" type="image/x-icon" />
    <script type="text/javascript">
        // 页面加载完成之后
        $(function () {
            //查看用户名是否可用
            $("#code_img").click(function (){
                this.src="${pageContext.request.contextPath}/kaptcha.jpg?d=" + new Date();//this.src = this.src;
            });

            $("#sub_btn").click(function () {
                //验证性别
                if(!$("#nan").attr("checked") && !$("#nv").attr("checked")){
                    $("span.errorMsg").text("请选择性别！");
                    return false;
                }
                //验证密码 5-12字母下划线数字组成;
                var passText = $("#password").val();
                var passPatt = /^\w{5,12}$/;
                if (!passPatt.test(passText)) {
                    $("span.errorMsg").text("密码不合法！");
                    return false;
                }
                //验证确认密码, 和密码相同;
                var passtext = $("#repwd").val();
                if (passtext != passText) {
                    $("span.errorMsg").text("两次密码不相同！");
                    return false;
                }
                //邮箱验证
                var emailText = $("#email").val();
                var emailPatt = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
                if (!emailPatt.test(emailText)) {
                    $("span.errorMsg").text("邮箱不合法！");
                    return false;
                }
                //验证码验证
                var codeText = $("#code").val();
                codeText = codeText.trim();
                if (codeText == null || codeText == "") {
                    $("span.errorMsg").text("验证码不合法！");
                    return false;
                }
                $(".errorMsg").text("");


            });
            //更改头像
            $('#updateImg').click(function () {
                var $file=$('#file');
                //触发文件按钮的点击事件
                $file.click();

                //选择文件后，获取上传的图片
                $file.change(function () {
                    //获取上传的图片
                    var file=$file[0].files[0];
                    //检验是否为图像
                    if(!/image\/\w+/.test(file.type)){
                        alert("抱歉，只支持图片类型哦！");
                        return false;
                    }
                    if(file.size/1024>16 * 1024){
                        alert('文件太大，必须小于16M！');
                        return false;
                    }
                    var reader = new FileReader();
                    //将文件以Data URL形式读入页面
                    reader.readAsDataURL(file);
                    reader.onload=function () {
                        //将img中的图像更改成更改后的图像，并上传
                        $('.img img').attr('src',this.result);
                    };
                    var name=$("#name").val();//String
                    //利用formData传送数据
                    var data=new FormData();
                    data.append("name",name);
                    data.append("file",file);
                    $.ajax({
                        url:"${basePath}user/uploadImg",
                        data:data,
                        //上传文件无需缓存
                        cache: false,
                        contentType:false, //- 必须false才会自动加上正确的Content-Type
                        processData: false, //- 必须false才会避开jQuery对 formdata 的默认处理,XMLHttpRequest会对 formdata 进行正确的处理
                        type:'post',
                        success:function (result) {
                            if(result.code!==200){
                                //上传成功
                            }else{
                                alert(result.extend.error);
                                //取消更改，将数据库原来的图像设置
                                $('.img').empty();
                                $('.img').append($("    <img src=\"${basePath}user/img?name="+name+"\" style=\"width: 50px;height:50px;border-radius: 25px;display: inline-block;background-position: center center;\" alt=\"\">"));
                            }
                        }
                    });
                });
            });
        });



    </script>
    <style type="text/css">
        .login_form {
            height: 600px;
            margin-top: 25px;
        }
        #headImg{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
        }
        #headImg img{
            width: 100%;
        }
    </style>
</head>
<body>
<div id="login_header">
    <img class="logo_img" alt="" src="static/img/logo.gif">
</div>

<div class="login_banner">

    <div id="l_content">
        <span class="login_word">修改信息</span>
    </div>

    <div id="content">
        <div class="login_form">
            <div class="login_box">
                <div class="tit">
                    <input type="file" id="file" style="display: none">
                    <c:if test="${not empty sessionScope.user.headImg}">
                        <img onclick="A()" src="${basePath}user/img?name=${sessionScope.user.name}" style="width: 50px;height:50px;border-radius: 50%;" alt="">
                    </c:if>
                    <c:if test="${empty sessionScope.user.headImg}">
                        <img onclick="A()" src="static/img/defaultHeadImg3.png" style="width: 50px;height:50px;border-radius: 50%;" alt="">
                    </c:if>
                    <h1>${sessionScope.user.name}的信息</h1>
                    <span class="errorMsg">
<%--                        <%=request.getAttribute("msg") == null ? "请输入注册信息" : request.getAttribute("msg")%>--%>
                        ${empty requestScope.msg ? "请输入修改的信息" : requestScope.msg}
                    </span>
                </div>
                <div class="form">
                    <form action="${pageContext.request.contextPath}/user/updateUserInfo" method="post">
                        <input type="hidden" value="${sessionScope.user.name}" name="name" id="name"/>
                        <br/>
                        <label>性别：</label>
                        <input type="radio" value="男" name="sex" id="nan"/>男
                        <input type="radio" value="女" name="sex" id="nv"/>女
                        <br/>
                        <br/>
                        <label>修改密码：</label>
                        <input class="itxt" type="password" placeholder="请输入密码"
                               autocomplete="off" tabindex="1" name="password" id="password"/>
                        <br/>
                        <br/>
                        <label>确认密码：</label>
                        <input class="itxt" type="password" placeholder="确认密码"
                               autocomplete="off" tabindex="1" name="repwd" id="repwd"/>
                        <br/>
                        <br/>
                        <label>电子邮件：</label>
                        <input class="itxt" type="text" placeholder="请输入邮箱地址"
                               autocomplete="off" tabindex="1" name="email" id="email"
                               value="${empty requestScope.email ? sessionScope.user.email : requestScope.email}"/>
                        <br/>
                        <br/>
                        <label>验证码：</label>
                        <input class="itxt" type="text" name="code" style="width: 80px;" id="code"/>
                        <img alt="" src="kaptcha.jpg" style="float: right; margin-right: 40px; width: 100px; height: 28px;" id="code_img">
                        <br/>
                        <br/>
                        <input type="submit" value="修改" id="sub_btn"/>
                    </form>
                    <button id="updateImg" style="width: 360px; height:35px">更改头像</button>
                </div>

            </div>
        </div>
    </div>
</div>
<%--静态包含页脚信息--%>
<%@include file="/pages/common/footer.jsp" %>
</body>
</html>
